<template>
  <div>
      <el-form :inline="true" class="demo-form-inline" :model="search">
      <el-select v-model="search.id" placeholder="检查人" style="width:150px">
        <el-option value="" >检查人</el-option>
        <el-option v-for="item in user" :key="item.name" 
        :label="item.name" :value="item.id">
        </el-option>
      </el-select>
      <el-select v-model="search.id2" placeholder="项目名称" style="width:150px">
        <el-option value="" >项目名称</el-option>
        <el-option v-for="item1 in getName" :key="item1.project_name" 
        :label="item1.project_name" :value="item1.id">
        </el-option>
      </el-select>
       <el-form-item>
        <el-date-picker v-model="search.starTime" type="date" placeholder="选择日期"></el-date-picker> --
      </el-form-item>
      <el-form-item>
        <el-date-picker v-model="search.endTime" type="date" placeholder="选择日期"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="select">检索</el-button>
      </el-form-item>
    </el-form>
    <h1 style="text-align: center; margin-top: 30px; margin-bottom: 30px">质量巡检列表</h1>
    <div>
      <el-table :data="personnel">
        <el-table-column prop="p_id" label="巡检编号"></el-table-column>
        <el-table-column prop="project_name" label="项目名称">
        </el-table-column>
        <el-table-column prop="name" label="质检员"> </el-table-column>
        <el-table-column prop="check_part" label="检查部位"> </el-table-column>
        <el-table-column prop="check_date" label="检查日期"> </el-table-column>
        <el-table-column prop="check_situation" label="检查情况">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-dropdown @command="handleClick">
              <el-button type="primary">
                操作<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="{ row: scope.row, type: '删除' }">删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
          </el-table-column >
      </el-table>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      user: {}, //高级检索对象
      getName:{},
      personnel: [], //表格数据
      row: {},
      search:{},
    };
  },
  methods: {
      //高级查询
    select(){
        console.log(this.search)
       this.personnel=[];
       axios.get(`http://localhost/GetList`,{
           params:{
               "id":this.search.id,
               "id2":this.search.id2,
               "starTime":this.search.starTime,
               "endTime":this.search.endTime,
           }
       }).then((response) => {
          this.personnel=response.data;

      });
   },
   // 下拉框查询
   getuser(){
      axios.get(`http://localhost/GetList/getUser`).then((response) => {
        this.user = response.data;
      });
   },
   getname(){
        axios.get(`http://localhost/GetList/getName`).then((response) => {
          this.getName = response.data;
      });
   },
    // 主页渲染
    getpersonnel() {
      axios.get(`http://localhost/GetList`).then((response) => {
        this.personnel = response.data;
      });
    },
    handleClick(command) {
      this.row = command.row;
      var val = command.type;
     if (val == "修改") {
        this.dialogVisible3 = !this.dialogVisible3;
        this.update(this.id);
      }else if (val == "删除") {
        this.del(this.row.id);
      }
    },
    //删除团队信息
    del(personnel) {
      axios.delete(`http://localhost/GetList/${personnel}`).then(() => {
        this.getpersonnel();
      });
    },
  },
  created() {
    this.getpersonnel();
    this.getuser();
    this.getname();
  },
};
</script>